<template>
	<div style="display: flex;flex-direction: column;justify-content: center;align-items:auto;background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);height: 100vh;">
        <!--导航栏-->
        <top-nav></top-nav>
        <div class="weather-info">
			<div class="info-details">
                <p>{{ value[1] }}</p>
            </div>
        </div>

        <div class="weather-other-info-box">

            <div class="d-flex align-items-center">
                <div class="weather-other-info">
                    <span class="iconfont icon-wendu1 font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">体感温度：{{ locWeatherInfo.feelsLike }}°</p>
                </div>
                <div class="weather-other-info">
                    <span class="iconfont icon-shidu font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">湿度：{{ locWeatherInfo.humidity }}%</p>
                </div>
                <div class="weather-other-info">
                    <span class="iconfont icon-jiangshuiliang font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">降水量：{{ locWeatherInfo.precip }}毫米</p>
                </div>
            </div>

            <div class="d-flex align-items-center">
                <div class="weather-other-info border-b-n">
                    <span class="iconfont icon-fengsu font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">风向：{{ locWeatherInfo.windDir }}</p>
                </div>
                <div class="weather-other-info border-b-n">
                    <span class="iconfont icon-fengsu2 font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">风速：{{ locWeatherInfo.windSpeed }}公里/小时</p>
                </div>
                <div class="weather-other-info border-b-n">
                    <span class="iconfont icon-qiya font-40 mb-10 color-6d"></span>
                    <p class="font-20 color-6 mt-10">压强：{{ locWeatherInfo.pressure }}百帕</p>
                </div>
            </div>

        </div>
		
		<el-button-group >
  			<el-button type="primary" icon="el-icon-arrow-left" @click="goToIndex">返回</el-button>
		</el-button-group>
    </div>
	
</template>

<script>
	import TopNav from "../components/TopNav";
	import {get, post} from "../utils/request";
	export default{
		data(){
			return{
				locWeatherInfo: '',
				currentId: '',
                value: [],
			}
		},
		components: {
            TopNav
        },
		methods:{
			getCityId() {
                let adm = this.value[0]
                let loc = this.value[1]
                get('https://geoapi.qweather.com/v2/city/lookup?key=9507a65da7254e2a954de1b0c5b446bc&location=' + loc + '&adm=' + adm)
                    .then(res => {
                        console.log(res);
                        if (res.data.code == 200) {
                            localStorage.setItem('cityId',res.data.location[0].id)
                            this.currentId = res.data.location[0].id
                            this.getWeatherInfo()
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            getWeatherInfo() {
                let cityId = this.currentId
                get('https://devapi.qweather.com/v7/weather/now?key=9507a65da7254e2a954de1b0c5b446bc&location=' + cityId)
                    .then(res => {
                        console.log(res);
                        this.locWeatherInfo = res.data.now
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            getParams () {  
        		// 取到路由带过来的参数  
        		let routerParams = this.$route.params.id;
        		// 将数据放在当前组件的数据内  
        		this.value = routerParams;
        		console.log("routerParams", this.value); // 输出 test message
        		this.getCityId();
      		},
      		goToIndex(){
      			this.$router.push({
            		name:'index',
            		params:{
            			id:this.value
            		}
            	})
      		}
		},
		mounted(){
			this.getParams(); 
		},
	}
</script>

<style>
	.weather-info {
        position: absolute;
        top: 0;
        left: 65px;
        height: calc(100% - 60px);
        padding: 100px 0px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
	.info-details>p {
        font-size: 33px;
        font-weight: 400;
        color: #FFFFFF;
        opacity: 0.9;
        margin-bottom: 10px;
    }
	 .weather-other-info {
        flex: 1;
        border-right: 2px solid #e0e0e0;
        border-bottom: 2px solid #e0e0e0;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .border-b-n {
        border-bottom: none;
    }
    .weather-other-info-box {
        min-height: 250px;
        height: calc(100vh - 500px);
        background-color: #fff;
        margin-bottom: 10px;
    }
    .weather-other-info-box>div {
        height: 50%;
    }

    .el-cascader .el-input > input {
        border-radius: 20px;
        background: #000000;
        opacity: 0.6;
        color: #ffffff;
        width: 180px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>